<template>
    <div class="page-wrap">
        <div class="page-header-wrap">
            <a-page-header @back="handleBack">
                <template #subTitle>
                    <span style="color: #000; font-size: 20px">{{ detailData.productName }}</span>
                </template>
                <template #tags>
                    <h-status-tag :status="detailData.status" class="margin-l-8" />
                </template>
                <div style="width: calc(100% - 130px)">
                    <a-form layout="inline">
                        <a-row>
                            <a-col :span="4">
                                <a-form-item label="所属产品" :span="24">
                                    <span>{{ $filters.valToNameFilter('fromSystem', detailData.systemId) }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="所属版本" :span="24">
                                    <span>{{ detailData.versionName }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="计划上线日期" :span="24">
                                    <span>{{ detailData.versionExpectTime ? $moment(detailData.versionExpectTime).format('YYYY-MM-DD') : '' }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="上线日期" :span="24">
                                    <span>{{
                                        detailData.versionOnlineRealTime ? $moment(detailData.versionOnlineRealTime).format('YYYY-MM-DD') : ''
                                    }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="负责人" :span="24">
                                    <span>{{ detailData.responsibleUser }}</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-page-header>
            <img src="@/assets/images/badge-track.png" style="width: 130px; height: 100%; position: absolute; top: 0px; right: 0" />
            <div
                style="
                    width: 130px;
                    height: 100%;
                    position: absolute;
                    top: 0px;
                    right: 0;
                    display: flex;
                    align-items: center;
                    padding-left: 50px;
                    color: #fff;
                "
            >
                <div>需求跟踪</div>
            </div>
        </div>

        <div style="background: #fff; width: 100%">
            <a-row>
                <a-col :span="24">
                    <h-section title="需求追溯图" collapse v-if="detailData.id">
                        <data-tree :detail="detailData" />
                    </h-section>
                </a-col>
                <a-col :span="14">
                    <h-section title="需求计划与实际完成时间" collapse v-if="detailData.id">
                        <flexbox style="font-size: 14px" class="margin-t-8"> </flexbox>
                        <div style="width: 604px">
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['a']"
                                :dataSource="dataObj['a']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #customTitle>
                                    <span v-if="dataObj['a'][0].onlineTimeOffset"
                                        >{{ dataObj['a'][0].onlineTimeOffset >= 0 ? '流程延期天数' : '流程提前天数' }}
                                    </span>
                                    <span v-else>流程提前/延期天数 </span>
                                </template>
                                <template #onlineTimeOffset="{ text }">
                                    {{ text ? Math.abs(text) : 0 }}
                                </template>
                            </a-table>
                            <a-divider />
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['b']"
                                :dataSource="dataObj['b']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #customTitle>
                                    <span v-if="dataObj['b'][0].randdStartOffset"
                                        >{{ dataObj['b'][0].randdStartOffset >= 0 ? '研发开始延期天数' : '研发开始提前天数' }}
                                    </span>
                                    <span v-else>流程提前/延期天数 </span>
                                </template>
                                <template #randdStartOffset="{ text }">
                                    {{ text ? Math.abs(text) : 0 }}
                                </template>
                            </a-table>
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['c']"
                                :dataSource="dataObj['c']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #customTitle>
                                    <span v-if="dataObj['c'][0].randdEndOffset"
                                        >{{ dataObj['c'][0].randdEndOffset >= 0 ? '研发结束延期天数' : '研发结束提前天数' }}
                                    </span>
                                    <span v-else>流程提前/延期天数 </span>
                                </template>
                                <template #randdEndOffset="{ text }">
                                    {{ text ? Math.abs(text) : 0 }}
                                </template>
                            </a-table>
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['d']"
                                :dataSource="dataObj['d']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #customTitle>
                                    <span v-if="dataObj['d'][0].randdConsumingOffset"
                                        >{{ dataObj['d'][0].randdConsumingOffset >= 0 ? '研发耗时延期天数' : '研发耗时提前天数' }}
                                    </span>
                                    <span v-else>流程提前/延期天数 </span>
                                </template>
                                <template #randdConsumingOffset="{ text }">
                                    {{ text ? Math.abs(text) : 0 }}
                                </template>
                            </a-table>
                            <a-divider />
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['e']"
                                :dataSource="dataObj['e']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #customTitle>
                                    <span v-if="dataObj['e'][0].testStartOffset"
                                        >{{ dataObj['e'][0].testStartOffset >= 0 ? '测试开始延期天数' : '测试开始提前天数' }}
                                    </span>
                                    <span v-else>流程提前/延期天数 </span>
                                </template>
                                <template #testStartOffset="{ text }">
                                    {{ text ? Math.abs(text) : 0 }}
                                </template>
                            </a-table>
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['f']"
                                :dataSource="dataObj['f']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #customTitle>
                                    <span v-if="dataObj['f'][0].testEndOffset"
                                        >{{ dataObj['f'][0].testEndOffset >= 0 ? '测试结束延期天数' : '测试结束提前天数' }}
                                    </span>
                                    <span v-else>流程提前/延期天数 </span>
                                </template>
                                <template #testEndOffset="{ text }">
                                    {{ text ? Math.abs(text) : 0 }}
                                </template>
                            </a-table>
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['g']"
                                :dataSource="dataObj['g']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #customTitle>
                                    <span v-if="dataObj['g'][0].testConsumingOffset"
                                        >{{ dataObj['g'][0].testConsumingOffset >= 0 ? '测试耗时延期天数' : '测试耗时提前天数' }}
                                    </span>
                                    <span v-else>流程提前/延期天数 </span>
                                </template>
                                <template #testConsumingOffset="{ text }">
                                    {{ text ? Math.abs(text) : 0 }}
                                </template>
                            </a-table>
                        </div>
                    </h-section>

                    <h-section title="需求分析及转化过程" collapse v-if="detailData.id">
                        <!-- <div class="caption-font-color" style="font-size: 14px" v-html="analyzeTip"></div> -->
                        <div style="width: 804px">
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['h']"
                                :dataSource="dataObj['h']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #analyzeConsumingAvg="{ text }">
                                    <a-tag color="blue">
                                        {{ text }}
                                    </a-tag>
                                </template>
                            </a-table>
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['i']"
                                :dataSource="dataObj['i']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #confirmConsumingAvg="{ text }">
                                    <a-tag color="blue">
                                        {{ text }}
                                    </a-tag>
                                </template>
                            </a-table>
                        </div>
                        <div style="width: 404px">
                            <a-table
                                size="small"
                                bordered
                                :columns="columnObj['j']"
                                :dataSource="dataObj['j']"
                                :pagination="false"
                                class="margin-t-16"
                            >
                                <template #conversionConsumingAvg="{ text }">
                                    <a-tag color="blue">
                                        {{ text }}
                                    </a-tag>
                                </template>
                            </a-table>
                        </div>
                    </h-section>
                </a-col>
                <a-col :span="10">
                    <h-section title="需求时间轴" collapse v-if="detailData.id">
                        <time-line :data="dataObj" :detail="detailData" v-if="dataObj.a" />
                    </h-section>
                </a-col>
            </a-row>
        </div>
    </div>
</template>

<script lang="ts">
import { HStatusTag } from '@/components';
import TimeLine from './components/timeline.vue';
import DataTree from './components/DataTree.vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { columnObj } from './config/data';
import api from '@/api';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HStatusTag,
        TimeLine,
        DataTree
    },
    setup() {
        const { route, handleBack } = useRouterApi({
            backQuery: {
                path: '/energyManage/requireTrack'
            }
        });
        const state = reactive<any>({
            detailData: {},
            dataObj: {}
        });
        const getDetailData = async () => {
            const query = {
                id: route.query.id
            };
            const { success, moule } = await api.requireTrackModel.findById(query);
            if (success) {
                const obj = {};
                const { pmpRiskIndexDTO } = moule;
                if (pmpRiskIndexDTO) {
                    const {
                        analyzeConsuming: analyzeConsumingAvg,
                        confirmConsuming: confirmConsumingAvg,
                        conversionConsuming: conversionConsumingAvg
                    } = pmpRiskIndexDTO;
                    state.detailData = { ...moule, analyzeConsumingAvg, confirmConsumingAvg, conversionConsumingAvg };
                }
                Object.keys(columnObj).forEach((key, index) => {
                    const value = columnObj[key];
                    obj[key] = obj[key] || [];
                    obj[key][0] = obj[key][0] || { key: index };
                    value.forEach((item) => {
                        obj[key][0][item.dataIndex] = state.detailData[item.dataIndex];
                    });
                });
                state.dataObj = obj;
            }
        };
        const init = () => {
            getDetailData();
        };
        init();
        return {
            columnObj,
            ...toRefs(state),
            handleBack
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    position: relative;
    height: 100%;
    .page-header-wrap {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 9;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        margin-bottom: 24px;
        &::before {
            content: '';
            position: absolute;
            width: 6px;
            height: 100%;
            background: #3094e9;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .extra-wrap {
            position: absolute;
            right: 40px;
            bottom: 22px;
            color: #000;
            cursor: pointer;
        }
    }
}
.section-wrap {
    padding: 0;
}
// // 去掉表头颜色
::v-deep(.ant-table-thead) > tr > th {
    background: #eaf5fe !important;
    font-weight: 400;
    color: @primary-color;
}
::v-deep(.ant-divider) {
    border-top: 2px solid #eaf5fe;
}
::v-deep(.zoom-container) {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>